<template>
<view>
<!-- 账户信息开始 -->
<view class="account_info">
  <image src="/static/pages/images/account_bg@2x.png" class="account_info_bg"></image>
  <view class="account_info_data clearfix wrap">
    <view class="account_info_list">
      <view class="account_info_number">18500.00</view>
      <view class="account_info_content">可用余额</view>
    </view>
    <view class="account_info_list">
      <view class="account_info_number">4275.00</view>
      <view class="account_info_content">可提现</view>
    </view>
    <view class="account_info_list">
      <view class="account_info_number">2000.00</view>
      <view class="account_info_content">提现中</view>
    </view>
    <view class="account_info_list">
      <view class="account_info_number">276300.00</view>
      <view class="account_info_content">累计充值</view>
    </view>
    <view class="account_info_list">
      <view class="account_info_number">19800.00</view>
      <view class="account_info_content">累计提现</view>
    </view>
    <view class="account_info_list">
      <view class="account_info_number">50.00</view>
      <view class="account_info_content">冻结余额</view>
    </view>
  </view>
  <view class="module clearfix wrap">
    <view class="module_content"><image src="/static/pages/images/cashout@2x.png" class="module_icon"></image>申请提现</view>
    <view class="module_content"><image src="/static/pages/images/invest@2x.png" class="module_icon"></image>账户充值</view>
    <view class="module_content"><image src="/static/pages/images/diamond@2x.png" class="module_icon" style="width:31rpx;height:28rpx"></image>VIP充值</view>
  </view>
</view>
<!-- 账户信息结束 -->
<!-- tab详细信息开始 -->
<view class="account_detail">
  <view class="detail_tab clearfix">
    <view :class="'detail_tab_list ' + (currentTab1==0?'active':'')" data-current="0" @tap="clickTab1">余额明细</view>
    <view :class="'detail_tab_list ' + (currentTab1==1?'active':'')" data-current="1" @tap="clickTab1">充值记录</view>
    <view :class="'detail_tab_list ' + (currentTab1==2?'active':'')" data-current="2" @tap="clickTab1">提现记录</view>
  </view>
  <view :class="'detail_content wrap ' + (currentTab1 == 0 ? 'show':'hidden')">
    <view class="detail_content_tab clearfix">
      <view :class="'detail_content_tab_list ' + (currentTab2==0?'active':'')" data-current="0" @tap="clickTab2">全部</view>
      <view :class="'detail_content_tab_list ' + (currentTab2==1?'active':'')" data-current="1" @tap="clickTab2">赚取</view>
      <view :class="'detail_content_tab_list ' + (currentTab2==2?'active':'')" data-current="2" @tap="clickTab2">消费</view>
    </view>
    <view :class="'income_content ' + (currentTab2 == 0 ? 'show':'hidden')">
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">-¥30.00</view>
          <view class="description">描述：下单消费</view>
        </view>
      </view>
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">+¥84.28</view>
          <view class="description">描述：用户退款订单</view>
        </view>
      </view>
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">-¥30.00</view>
          <view class="description">描述：下单消费</view>
        </view>
      </view>
    </view>
     <view :class="'income_content ' + (currentTab2 == 1 ? 'show':'hidden')">
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">+¥84.28</view>
          <view class="description">描述：用户退款订单</view>
        </view>
      </view>
    </view>
     <view :class="'income_content ' + (currentTab2 == 2 ? 'show':'hidden')">
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">-¥30.00</view>
          <view class="description">描述：下单消费</view>
        </view>
      </view>
      <view class="income_content_list">
        <view class="left">
          <view class="order_number">单号：201812251234567</view>
          <view class="order_time">2018-12-25 12:07:36</view>
        </view>
        <view class="right">
          <view class="price">-¥30.00</view>
          <view class="description">描述：下单消费</view>
        </view>
      </view>
    </view>
  </view>
  <view :class="'detail_content wrap ' + (currentTab1 == 0 ? 'show':'hidden')"></view>
  <view :class="'detail_content wrap ' + (currentTab1 == 0 ? 'show':'hidden')"></view>
</view>
<!-- tab详细信息结束 -->
</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();

export default {
  data() {
    return {
      currentTab1: 0,
      currentTab2: 0
    };
  },

  components: {},
  props: {},
  methods: {
    //事件处理函数
    clickTab1: function (e) {
      var that = this;

      if (this.currentTab1 === e.target.dataset.current) {
        return false;
      } else {
        that.setData({
          currentTab1: e.target.dataset.current
        });
      }
    },
    clickTab2: function (e) {
      var that = this;

      if (this.currentTab2 === e.target.dataset.current) {
        return false;
      } else {
        that.setData({
          currentTab2: e.target.dataset.current
        });
      }
    }
  }
};
</script>
<style>
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box
}
.show {
  display: block;
}
.hidden {
  display: none;
}
.left {
  float: left;
}
.right {
  float: right;
}
.account_info {
  position: relative;
}
.account_info .account_info_bg {
  width: 100%;
  height: 346rpx;
  position: absolute;
  z-index: -1;
}
.account_info .account_info_data .account_info_list {
  float: left;
  width: 33.333%;
  padding: 28rpx 0;
  box-sizing: border-box;
}
.account_info .account_info_data .account_info_list .account_info_number {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.account_info .account_info_data .account_info_list .account_info_content {
  font-size: 22rpx;
  color: #fff;
  text-align: center;
  margin-top: 5rpx;
}
.account_info .module .module_content {
  float: left;
  width: 33.333%;
  height: 80rpx;
  font-size: 24rpx;
  color: #fff;
  line-height: 80rpx;
  text-align: center;
  box-sizing: border-box;
  padding-left: 40rpx;
  position: relative;
}
.account_info .module .module_content::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 20rpx;
  background-color: #fff;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.account_info .module .module_content:last-child::after {
 height: 0;
}
.account_info .module .module_content .module_icon {
  position: absolute;
  width: 27rpx;
  height: 28rpx;
  top: 50%;
  left: 50rpx;
  transform: translateY(-50%);
}
.account_detail .detail_tab .detail_tab_list {
  width: 33.333%;
  height: 80rpx;
  background-color: #ebebeb;
  font-size: 30rpx;
  color: #666;
  line-height: 80rpx;
  text-align: center;
  float: left;
}
.account_detail .detail_tab .detail_tab_list.active {
  background-color: #fff;
  color: #1a1a1a;
}
.account_detail .detail_content .detail_content_tab .detail_content_tab_list {
  float: left;
  height: 76rpx;
  width: 33.333%;
  line-height: 76rpx;
  text-align: center;
  position: relative;
  font-size: 30rpx;
  color: #666;
}
.account_detail .detail_content .detail_content_tab .detail_content_tab_list.active {
  color: #1a1a1a;
}
.account_detail .detail_content .detail_content_tab .detail_content_tab_list.active::before {
  content: '';
  height: 5rpx;
  width: 40rpx;
  background-color: #ff6a00;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.account_detail .detail_content .detail_content_tab .detail_content_tab_list::after {
  content: '';
  height: 20rpx;
  width: 1px;
  background-color: #9f9f9f;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.account_detail .detail_content .detail_content_tab .detail_content_tab_list:last-child::after {
  height: 0;
}
.account_detail .detail_content .income_content_list {
  height: 145rpx;
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding-top: 40rpx;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}
.account_detail .detail_content .income_content_list .left .order_number {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 5rpx;
}
.account_detail .detail_content .income_content_list .order_time, .account_detail .detail_content .income_content_list .description {
  display: block;
  font-size: 24rpx;
  color: #999;
}
.account_detail .detail_content .income_content_list .price {
  font-size: 30rpx;
  color: #ff6a00;
  text-align: right;
  margin-bottom: 5rpx;
}
</style>